<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册页面</title>
    <link rel="stylesheet" href="./css/Element-ui.css" />
  </head>
  <style>
    body {
      margin: 0;
    }
    .center {
      width: 1200px;
      margin: 0 auto;
    }
    .el-form-item__label {
      color: #ffffff;
    }
    #footer_center p {
      margin: 0;
    }
    #footer_center h3 {
      color: white;
    }
    .el-form-item__label {
      color: black;
    }
  </style>
  <body>
    <div id="app">
      <el-container>
        <el-header>
          <my-header />
        </el-header>
        <div class="center">
          <el-main style="margin-top: 20px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card>
                  <img :src="img" alt="img" style="width: 100%" />
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-form label-width="80px">
                  <el-form-item>
                    <h1 style="float: left; font-size: 30px">立即注册</h1>
                    <a
                      href="./login.html"
                      style="
                        float: right;
                        color: #409eff;
                        position: relative;
                        top: 25px;
                        text-decoration: none;
                      "
                      >已有账号？现在登录！</a
                    >
                  </el-form-item>
                  <el-form-item label="用户名">
                    <el-input
                      placeholder="请输入用户名"
                      v-model="user.username"
                      maxlength="18"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input
                      placeholder="请输入密码"
                      v-model="password"
                      maxlength="18"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="重复密码">
                    <el-input
                      placeholder="请输入密码"
                      v-model="user.password"
                      maxlength="18"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input
                      placeholder="请输入昵称"
                      v-model="user.nickName"
                      maxlength="10"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="reg">注册</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-main>
        </div>
        <el-footer
          style="background-color: #2f3234; height: 280px; padding: 50px"
        >
          <my-footer />
        </el-footer>
      </el-container>
    </div>
  </body>
  <script src="./js/vue.min.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/Element-ui.min.js"></script>
  <script src="./js/my-header.js"></script>
  <script src="./js/my-footer.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: {
        img: "./imgs/reg.png",
        user: {
          username: "",
          password: "",
          nickName: "",
        },
        password: "",
      },

      methods: {
        //点击注册时触发的注册事件
        reg() {
          //用来判断所有的信息是否按照我们的输入方式填写，如果不是就提示并直接返回结果
          if (v.user.username.length < 6) {
            this.$message({
              message: "请输入6位以上的用户名",
              type: "warning",
            });
            return;
          } else if (v.user.password.length < 8) {
            this.$message({
              message: "请输入8位以上的密码",
              type: "warning",
            });
            return;
          } else if (v.user.password !== v.password) {
            this.$message({
              message: "密码不一致！",
              type: "error",
            });
            return;
          } else if (v.user.nickName.length < 1) {
            this.$message({
              message: "请输入1位以上的昵称",
              type: "warning",
            });
            return;
          }
          //当以上条件都符合要求时，发送注册请求
          else {
            //使用axios发送post请求，当参数超过两个时，发送的就是一个对象，因此用post
            axios.post("/v1/regAdd", v.user).then((response) => {
              //如果后台返回数据为0，证明当前用户已被注册，提示用户重新填写
              if (response.data == 0) {
                location.href = "./login.html";
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                return;
              } else if (response.data == 1) {
                if (response.data == 1) {
                  this.$message({
                    message: "用户名已存在",
                    type: "warning",
                  });
                  return;
                }
              } else {
                //当返回数据为其他值时，证明注册失败，提示用户重新填写
                this.$message({
                  message: "注册失败",
                  type: "error",
                });
              }
            });
          }
        },
      },
      created: {},
    });
  </script>
</html>
